﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="FantasyWereld.Views.SearchResultsPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="using:FantasyWereld"
                        xmlns:common="using:FantasyWereld.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d"
                        d:ExtensionType="Search">

    <Page.Resources>
        <CollectionViewSource x:Name="resultsViewSource"
                              Source="{Binding Results}" />
        <CollectionViewSource x:Name="filtersViewSource"
                              Source="{Binding Filters}" />
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Image Grid.RowSpan="2"
               Source="/Images/achtergrond.png"
               Stretch="UniformToFill"
               HorizontalAlignment="Right"
               Style="{StaticResource Diffuse}" />

        <Grid x:Name="resultsPanel"
              Grid.Row="1">
            <!--
            The body of the page in most view states uses an items controls to create multiple radio buttons
            for filtering above a horizontal scrolling grid of search results
        -->
            <Grid x:Name="typicalPanel">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <ItemsControl x:Name="filtersItemsControl"
                              Canvas.ZIndex="1"
                              ItemsSource="{Binding Source={StaticResource filtersViewSource}}"
                              Visibility="{Binding ShowFilters, Converter={StaticResource BooleanToVisibilityConverter}}"
                              Margin="120,-3,120,30">

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <RadioButton GroupName="Filters"
                                         IsChecked="{Binding Active, Mode=TwoWay}"
                                         Checked="Filter_Checked"
                                         Style="{StaticResource TextRadioButtonStyle}">
                                <TextBlock Text="{Binding Description}"
                                           Margin="3,-7,3,10"
                                           Style="{StaticResource GroupHeaderTextStyle}" />
                            </RadioButton>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

                <GridView x:Name="resultsGridView"
                          AutomationProperties.AutomationId="ResultsGridView"
                          AutomationProperties.Name="Search Results"
                          TabIndex="1"
                          Grid.Row="1"
                          Margin="0,-238,0,0"
                          Padding="110,240,110,46"
                          SelectionMode="None"
                          IsSwipeEnabled="false"
                          IsItemClickEnabled="True"
                          ItemsSource="{Binding Source={StaticResource resultsViewSource}}"
                          ItemTemplate="{StaticResource StandardSmallIcon300x70ItemTemplate}"
                          ItemClick="OnItemClick">

                    <GridView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="Height"
                                    Value="136" />
                            <Setter Property="Margin"
                                    Value="0,0,38,8" />
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </Grid>

            <!--
                The body of the page when snapped uses a combo box to select a filter above a
                vertical scrolling list of search results
            -->
            <Grid x:Name="snappedPanel"
                  Visibility="Collapsed">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <ComboBox ItemsSource="{Binding Source={StaticResource filtersViewSource}}"
                          Visibility="{Binding ShowFilters, Converter={StaticResource BooleanToVisibilityConverter}}"
                          Margin="20,0,20,20"
                          SelectionChanged="Filter_SelectionChanged"
                          HorizontalAlignment="Left" />

                <ListView x:Name="resultsListView"
                          AutomationProperties.AutomationId="ResultsListView"
                          AutomationProperties.Name="Search Results"
                          TabIndex="1"
                          Grid.Row="1"
                          Margin="10,0,0,0"
                          Padding="0,0,0,60"
                          SelectionMode="None"
                          IsSwipeEnabled="false"
                          IsItemClickEnabled="True"
                          ItemsSource="{Binding Source={StaticResource resultsViewSource}}"
                          ItemTemplate="{StaticResource StandardSmallIcon70ItemTemplate}">

                    <ListView.ItemContainerStyle>
                        <Style TargetType="Control">
                            <Setter Property="Margin"
                                    Value="0,0,18,8" />
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
            </Grid>
        </Grid>

        <!-- Back button, page title and subtitles-->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       Grid.Column="1"
                       Text="{StaticResource AppName}"
                       IsHitTestVisible="false"
                       Style="{StaticResource PageHeaderTextStyle}" />
            <TextBlock x:Name="resultText"
                       Grid.Column="2"
                       Text="Resultaten voor&#x00a0;"
                       IsHitTestVisible="false"
                       Style="{StaticResource PageSubheaderTextStyle}" />
            <TextBlock x:Name="queryText"
                       Grid.Column="3"
                       Text="{Binding QueryText}"
                       IsHitTestVisible="false"
                       Style="{StaticResource PageSubheaderTextStyle}" />
            <!-- SearchBox Control that provides suggestions to the user, focus given to control by keybaord by FocusOnKeyboardInput being set to true -->
            <SearchBox x:Name="SearchBox"
                       x:Uid="SearchBox"
                       Grid.Column="3"
                       Height="35"
                       Width="35"
                       HorizontalAlignment="Right"
                       VerticalAlignment="Center"
                       Margin="0 0 20 0"
                       SearchHistoryEnabled="True"
                       PlaceholderText="Doorzoek FantasyWereld" 
                       GotFocus="SearchBox_GotFocus"
                       LostFocus="SearchBox_LostFocus"
                       SuggestionsRequested="SearchBoxEventsSuggestionsRequested"
                       QuerySubmitted="SearchBoxEventsQuerySubmitted"
                       FocusOnKeyboardInput="True" />
        </Grid>

        <TextBlock x:Name="noResultsTextBlock"
                   Grid.Row="1"
                   Margin="120,50,0,0"
                   Visibility="Collapsed"
                   Style="{StaticResource SubheaderTextStyle}"
                   Text="Er zijn geen resultaten voor jouw zoekopdracht." />

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="filtersItemsControl"
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="100,-3,90,30" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultsGridView"
                                                       Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="90,240,86,56" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock"
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="100,50,0,0" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped in addition to more extensive changes:
                    * The query text becomes the page header
                    * A different representation for filter selection and search results is used
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="queryText"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultText"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="typicalPanel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedPanel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock"
                                                       Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="20,0,0,0" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource BaselineTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>

            <VisualStateGroup x:Name="ResultStates">
                <VisualState x:Name="ResultsFound" />
                <!-- When there are no results, the results panel is replaced with an informational TextBlock -->
                <VisualState x:Name="NoResultsFound">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="resultsPanel"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
